<template>
  <CustomModal
    title="解绑电子秤"
    v-model="visible"
    :showCancelButton="false"
    :confirmText="$t('system.unbind')"
    @confirm="modelConfirm"
  >
    <scroll-view class="scroll-content" scroll-y>
      <view class="nw-label">
        确认是否解绑该电子秤SN：
        <view class="bold-text">【 {{ props.sn }} 】</view>
      </view>
    </scroll-view>
  </CustomModal>
</template>

<script setup>
defineOptions({
  name: 'UnBindElecScale',
  inheritAttrs: false
})

const props = defineProps({
  deviceSn: {
    type: [String, Number],
    default: ''
  },
  sn: {
    type: String,
    default: ''
  }
})
const visible = defineModel({
  type: Boolean,
  default: false
})
const emit = defineEmits(['update'])
const { bindDeviceList } = storeToRefs(useDeviceStore())

const modelConfirm = _ => {
  const data = bindDeviceList.value.find(item => item.sn === props.deviceSn)
  data.bindElectronic = ''
  visible.value = false
  emit('update')
}
</script>

<style lang="scss" scoped>
.nw-label {
  margin: 40rpx 0 20rpx;
  flex-direction: column;
  .bold-text {
    width: 100%;
    text-align: center;
    font-weight: 600;
  }
}
</style>
